<template>
  <iot-blk
    class="today-blk device-blk"
    title="应急资源情况"
    :moreType="0"
    style=" height: 1.85rem;"
  >
    <!-- <div class="con">
      <div>灭火及爆炸物处置设备：{{ commandInfo.countFire || 0 }}</div>
      <div>安防及反恐防爆装备：{{ commandInfo.countTerror || 0 }}</div>
      <div>除粮食之外的食品：{{ commandInfo.countFood || 0 }}</div>
      <div>粮食：{{ commandInfo.countCereal || 0 }}</div>
      <div>其他：{{ commandInfo.countOther || 0 }}</div>
    </div> -->
      <div class="chart" id="resourceChart"></div>
  </iot-blk>
</template>
<script>
import HighCharts from "highcharts";
import { mapState } from "vuex";
export default {
  name: "HomeHeader",
  props: {
    type: {
      type: String,
      default: "fireControl",
    },
    data: {
      type: Object,
      default() {
        return {};
      },
    },
  },
  computed: {
    ...mapState(["scale"]),
  },
  watch: {
    scale() {
      this.renderChart();
    },
    data() {
      this.renderChart();
    },
  },
  data() {
    return {
      loading: false,
      chartData: null,
    };
  },
  methods: {
    renderChart() {
      let width = this.scale * 380;
      let height = this.scale * 250;
      let data = this.chartData;
      let options = {
        credits: {
          enabled: false,
        },
        colors: ["#E8684A", "#9270CA", "#F6BD16", "#6DC8EC",'#FFCBC1'],
        chart: {
          width: width,
          height: height,
          type: "pie",
          backgroundColor: "transparent",
          spacing: 0,
          // margin: [0, 100 * this.scale, 0, 0],
        },
        title: {
          floating: true,
          text: "",
          useHTML: true,
          style: {
            color: "#89F8FF",
            fontSize: 12 * this.scale + "px",
          },
        },
        plotOptions: {
          pie: {
            innerSize: "60%",
            dataLabels: {
              enabled: true,
              allowOverlap: false, // 允许数据标签重叠
              color: "#AFECFF",
              borderWidth: 0,
              style: {
                fontSize: 12 * this.scale + "px",
              },
              distance: 20 * this.scale,
              format: "{point.name}<br>{point.y}",
            },
            borderWidth: 0,
            showInLegend: true,
          },
        },
        series: [
          {
            name: "数量",
            data: [
              ["灭火及爆炸物处置设备", this.data.countFire || 10],
              ["安防及反恐防爆装备", this.data.countTerror || 10],
              ["除粮食之外的食品", this.data.countFood || 10],
              ["粮食", this.data.countCereal || 10],
              ["其他", this.data.countOther || 10],
            ],
          },
        ],
        legend: {
          // orient: "horizontal",
          // enabled: true,
          // align: "right",
          // layout: "vertical",
          // floating: true,
          // verticalAlign: "middle",
          itemStyle: {
            color: "#AFECFF",
            fontSize: 12 * this.scale + "px",
          },
          // itemMarginTop:  * this.scale,
          itemHoverStyle: {
            color: "#ffffff",
          },
        },
      };
      HighCharts.chart("resourceChart", options, function(c) {
        // 图表初始化完毕后的会掉函数
        // 环形图圆心
        let centerX = c.series[0].center[0];
        let centerY = c.series[0].center[1];
        let titleHeight = parseInt(c.title.styles.fontSize);
        // 动态设置标题位置
        c.setTitle({
          y: centerY + titleHeight / 2,
          // text: "<font size='"+(30*this.scale)+"'>104<font><p>联网单位(家)</p>"
        });
      });
    },
  },
  mounted() {
    this.renderChart();
  },
};
</script>

<style lang="less" scoped>
.today-blk {
  // height: 280px !important;
  /deep/.con {
    display: flex !important;
    align-items: center !important;
    flex-direction: column !important;
    justify-content: space-around !important;
    height: 1.55rem;
    font-size: 0.0938rem !important;
  }
}
.content {
  font-size: 0.0938rem;
}
</style>
